<template>
    <div class="headerSide">
        <div class="container">
            <ul >
                <li class="first" @click.stop="navTo(0)" :class="{'active':defaultIndexs==0}">
                  <router-link :to="{name:'centerSprite'}">
                    <a >党建要闻</a>
                  </router-link>
                </li>
                <li  @click.stop="navTo(1)" :class="{'active':defaultIndexs==1}">
                  <router-link :to="{name:'studyList'}" >
                       <a >微党课 </a>
                  </router-link>
                </li>
              <li  @click.stop="navTo(2)" :class="{'active':defaultIndexs==2}">
                <router-link :to="{name:'heart'}">
                   <a >一颗红心 </a>
                </router-link>
              </li>
              <li @click.stop="navTo(3)" :class="{'active':defaultIndexs==3}">
                <router-link :to="{name:'dongtai'}">
                <a >反腐倡廉</a>
                </router-link>
              </li>
              <li  @click.stop="navTo(4)" :class="{'active':defaultIndexs==4}">
                <router-link :to="{name:'president'}">
                <a >小程序应用商店   </a>
                </router-link>
              </li>
            </ul>
          <!--<ul>-->
            <!--<li class="first">-->
              <!--<a  >学习</a>-->
            <!--</li>-->
            <!--<li>-->
              <!--<router-link :to="{name:'studyList'}">-->
              <!--<a >网上党校 </a>-->
              <!--</router-link>-->
            <!--</li>-->
            <!--<li>-->
              <!--<router-link :to="{name:'centerSprite'}">-->
              <!--<a >党规党章 </a>-->
              <!--</router-link>-->
            <!--</li>-->
            <!--<li>-->
              <!--<router-link :to="{name:'centerSprite'}">-->
              <!--<a >精神学习</a>-->
              <!--</router-link>-->
            <!--</li>-->
            <!--<li>-->
              <!--<router-link :to="{name:'centerSprite'}">-->
              <!--<a >视频网校   </a>-->
              <!--</router-link>-->
            <!--</li>-->
          <!--</ul>-->
          <!--<ul>-->
            <!--<li class="first">-->
              <!--<a  >互动</a>-->
            <!--</li>-->
            <!--<li>-->
              <!--<router-link :to="{name:'centerSprite'}">-->
              <!--<a >反腐倡廉 </a>-->
              <!--</router-link>-->
            <!--</li>-->
            <!--<li>-->
              <!--<router-link :to="{name:'centerSprite'}">-->
              <!--<a >答题活动 </a>-->
              <!--</router-link>-->
            <!--</li>-->
            <!--<li>-->
              <!--<router-link :to="{name:'centerSprite'}">-->
              <!--<a >群众监督</a>-->
              <!--</router-link>-->
            <!--</li>-->
            <!--<li>-->
              <!--<router-link :to="{name:'heart'}">-->
                <!--<a >一颗红心   </a>-->
              <!--</router-link>-->
            <!--</li>-->
          <!--</ul>-->
        </div>
    </div>
</template>


<script>
export default({
    props:{
      defaultIndexs:{
          type:Number
      }
    },
  data(){
      return {
          defaultIndex:0
      }
  },
  methods:{
    navTo(index){
        console.log(index)
        this.$emit('nav',index)
        this.defaultIndex= index
    }
  }
})
</script>

<style lang="stylus"  scoped="">
  .headerSide .container{
    overflow hidden
  }
  .headerSide .container ul{
    height 42px
    /*background #9d827c*/
    margin-bottom 10px
    line-height 42px
    background linear-gradient(top ,#ffb10f,#ff8647)
    box-shadow 0 3px 2px #d7d7d7
}
.headerSide .container ul li{
  float left
  width 206px
  text-align center
}
.headerSide .container ul li a{
  font-size 22px
  color white
  display inline-block
  width 100%
  height 100%
  position relative
}
.headerSide .container ul li.first{
  width 186px
  height 42px
  text-align center
  /*background #fcae18*/

}
.headerSide .container ul li.first a{
    font-size 22px
    color #fd1919

  }

  .headerSide .container ul li:hover a:before{
    position absolute
    content ''
    left 50%
    bottom 0
    width 75px
    height 2px
    background #fd1919
    margin-left -37px
  }
  .headerSide .container ul li.active a:before{
    position absolute
    content ''
    left 50%
    bottom 0
    width 75px
    height 2px
    background #fd1919
    margin-left -37px
  }

  .headerSide .container ul li a:after{
    position absolute
    content  ''
    right 2px
    top 50%
    width 2px
    height 28px
    margin-top -14px
    background #fd1919
  }
  .headerSide .container ul li:last-child a:after{
      height 0
  }
</style>
